<!--
 * @Author: t-xiangqun.li t-xiangqun.li@pcitc.com
 * @Date: 2025-10-09 17:16:55
 * @LastEditors: t-xiangqun.li t-xiangqun.li@pcitc.com
 * @LastEditTime: 2025-10-28 14:39:49
 * @FilePath: \electron-ai\src\App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="flex items-center justify-between h-screen">
    <div class="bg-gray-200 w-[300px] h-full border-r border-gray-300">
      <div class="h-[90%] overflow-y-auto">
        <ConversationList :items="conversationList" />
      </div>
      <div class="h-[10%] grid grid-cols-2 gap-2 p-2">
        <button
          class="bg-green-700 cursor-pointer border border-green-700 text-white shadow-sm rounded-[4px] inline-flex items-center justify-center h-[32px] px-[15px] py-[8px] text-sm hover:bg-green-700/90"
          @click="goHome"
        >
          新建聊天
        </button>
        <button
          class="bg-green-50 cursor-pointer border border-green-700 text-green-700 shadow-sm rounded-[4px] inline-flex items-center justify-center h-[32px] px-[15px] py-[8px] text-sm hover:bg-green-700 hover:text-white"
          @click="goSetting"
        >
          应用设置
        </button>
      </div>
    </div>
    <div class="bg-white text-gray-950 h-full flex-1">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup lang="ts">
import ConversationList from "./components/ConversationList.vue";
import { useRouter } from "vue-router";
import { computed, onMounted } from "vue";
import { initProviders } from "./db";
import { useConversationStore } from "./stores/conversation";
const router = useRouter();
const conversationStore = useConversationStore();
const conversationList = computed(() => {
  return conversationStore.items;
});
onMounted(async () => {
  await initProviders();
  conversationStore.fetchConversation();
});
const goSetting = () => {
  router.push("/setting");
};
const goHome = () => {
  router.push("/");
};
</script>
